<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Raster Smoothing</title>
    <link rel="stylesheet" href="../css/style.css">
    <script type="text/javascript" src="../../dist/paper-full.js"></script>
    <script type="text/paperscript" canvas="canvas">
        var raster = new Raster('pattern');

        function showRasters(raster, position, scale) {
            ['off', 'low', 'medium', 'high'].forEach(function(value, index) {
                var clone = raster.clone();
                clone.scale(scale);
                clone.smoothing = value;
                clone.bounds.topLeft = position + [400 * index, 0];
                new PointText({
                    point: clone.bounds.topLeft + [0, -10],
                    content: value
                });
            });
        }

        raster.onLoad = function () {
            showRasters(raster, new Point(50, 50), 4);
            showRasters(raster, new Point(50, 600), 0.75);
            raster.remove();
        };

    </script>
</head>
<body>
<canvas id="canvas" resize></canvas>
<img id="pattern" width="512" height="512" style="display: none;" src=""/>
</body>
</html>
